import React, { useEffect, useState } from 'react';
import { useHistory } from "react-router-dom";
import {
    Tabs, Toast, Flex, Card, Button, Badge, DatePicker, List ,PullToRefresh
} from 'antd-mobile';
import { dateFormat } from "../../model/code";
import http from "../../model/http";  
import Header from "../../components/header/Header";
import './index.less'

import '../../libs/font/iconfont.css';
// const h = document.documentElement.clientHeight - 100;
let page =1
let sourch_type= 1
let list = []
function ReturnVisit() {
    const [jurisdiction, setJurisdiction] = useState({})
    const [load,setLoad] = useState(false);
    const nowTimeStamp = new Date();
    const [date, setDate] = useState(nowTimeStamp)
    const [date2, setDate2] = useState(nowTimeStamp)
    let [height,setH] = useState()
    
  
    useEffect(()=>{
        setJurisdiction(sessionStorage.getItem('doctorJurisdiction')?JSON.parse(sessionStorage.getItem('doctorJurisdiction')):'')
         
        setTimeout(() => {
            selectData()
        }, 0);
       
        
        let height = Number(jurisdiction.authority) == 9?  document.documentElement.clientHeight - 100 : document.documentElement.clientHeight - 40
        setH(height)
    },[])
 

     // 查询
     const submitSearch = () => {
        console.log('触发')
        list=[]
        page =1
        selectData()
    }

    // 切换 tab
    const tabExchange = (id) =>{
           page =1
           sourch_type=id
           list=[]
           selectData()        
    }

    //查询 数据

    const selectData =() =>{
        // http://wxwork.gzsg.cn/wxwork/consultrecord/recordlist?
       // userId=SG06007&managerId=1000009&hosId=1
       //&page=1&items=10&
       // begintime=2022-04-01&endtime=2022-04-02&source_type=1

       setTimeout(async ()=>{
        let data={}
           console.log("auth",jurisdiction.authority)
          
           
    
            setLoad(true)
            let state = sessionStorage.getItem('doctorJurisdiction')?JSON.parse(sessionStorage.getItem('doctorJurisdiction')):''
            console.log("state",state)
            if( Number(state.authority) != 9 ){
                data={
                    items:"10",
                    begintime:dateFormat(date,'yyyy-MM-dd'),
                    endtime:dateFormat(date2,'yyyy-MM-dd'),              
                    page:page
                }
           }else{
                    data={
                        items:"10",
                        begintime:dateFormat(date,'yyyy-MM-dd'),
                        endtime:dateFormat(date2,'yyyy-MM-dd'),
                        source_type:sourch_type ,
                        page:page
                    }
           }
            const _list = await http.get('/consultrecord/recordlist', data)
    
            setTimeout(()=>{setLoad(false)},800)
            if(!_list.data.length) return;
            page = page +1
            
            let templist=[...list,..._list.data]
            templist.forEach(item=>{
                item.clist= item.content.split("\n")
            })
    
            list=templist
            console.log("list",list)
       },0)
    
   
    }

 
  
    return (
        <div className="v-return-visit">
            <div className='body-background-div'></div>
            {/* <div>123</div> */}
            <List className='g-mb10 g-p5-10 g-bg-f g-bdrs12 appointmentRecord-list-search-box'>

                <Flex>
                    <Flex.Item>
                        <DatePicker mode="date" value={date} onChange={d => {
                            setDate(d)
                            let dateNum = new Date(d).getTime()
                            let date2Num = new Date(date2).getTime()
                            if (Number(dateNum) > Number(date2Num)) {
                                setDate2(d)
                            }
                        }}>
                            <List.Item arrow="horizontal"></List.Item>
                        </DatePicker>
                    </Flex.Item>
                    <Flex.Item>
                        <DatePicker mode="date" value={date2} minDate={date} onChange={d => { setDate2(d) }}>
                            <List.Item arrow="horizontal"></List.Item>
                        </DatePicker>
                    </Flex.Item>
                    <Flex.Item><Button type="primary" size="small" className="appointmentRecord-list-search" onClick={() => submitSearch()} style={{ backgroundColor: '#39f', border: '1px solid #39f' }}>查询</Button></Flex.Item>
                </Flex>        
                    {
                        Number(jurisdiction.authority) == 9 ? (
                            <div className='tabLayout'>
                            <div>
                        {         
                            sourch_type == 1 ? (
                                <div className='flex-row'>
                                       <div onClick={()=>{  tabExchange(1) }} className='active'>电网咨询</div>
                                       <div onClick={()=>{ tabExchange(2) }} className='tabItem'>现场咨询</div>
                                </div>
                              
                            ) :(
                                <div className='flex-row'>
                                    <div onClick={()=>{ tabExchange(1) }} className='tabItem'>电网咨询</div>
                                    <div onClick={()=>{ tabExchange(2) }} className='active'>现场咨询</div>
                                </div>
                            )
                        }
                        </div>
                         </div>
                        ) :( <div></div> )
                    }
                <PullToRefresh direction='up' onRefresh={selectData} refreshing={load} 
                style={{height:height,width:'100%', overflow:'auto',paddingBottom:'50px',boxSizing:'border-box',fontSize:'14px' }}>
                 
                 {list.map((item,idx)=>(
                     <div key={idx} className='itemLayout'>
                        <div className='cellItem'>
                            <div className='mb5 f12'>
                                <span style={{color:"#c3c3c3"}}>
                                  咨询项目
                                </span>
                                <span style={{ color:'#3c8dd5' }}>
                                  :{item.consultName}
                                </span>
                                
                            </div>


                            <div className='mt12 f12'>
                                { 
                                   item.clist.map(m=>(
                                       <div className='mb10'>{ m }</div>
                                   ))
                                }

                            </div>


                            <div className='flex-b mt12'>
                                  <div>
                                      <span className='f12' style={{color:"#c3c3c3"}}>
                                      咨询部门
                                      </span>
                                      <span className='f12'>
                                      :{item.org_name}
                                      </span>
                               
                                </div>

                                <div>
                                    <span className='f12' style={{color:"#c3c3c3"}}>
                                    跟进时间
                                    </span>
                                    <span className='f12'>
                                    :{item.consult_date}
                                    </span>
                                    
                                </div>


                                </div>


                           
                           
                        </div>
                     </div> 
                 ))}
                 {list.length == 0? <div className='test-color'>暂无更多数据</div> : ''}
             </PullToRefresh>
            </List> 
            <Header />
        </div>
    )
                 }               
export default ReturnVisit;